<template>
  <div class="background-music">
    <img
      v-if="flag"
      src="../assets/imgs/music.png"
      @click="stop()"
    />
    <img
      v-else
      src="../assets/imgs/pause.png"
      @click="play()"
    />
    <audio
      autoplay
      loop
      ref="musicDom"
    >
      <source
        src="../assets/bgm.mp3"
        type="audio/mp3"
      />
    </audio>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const flag = ref(true);
    const musicDom = ref(null);
    const stop = () => {
      flag.value = false;
      musicDom.value.pause();
    };
    const play = () => {
      flag.value = true;
      musicDom.value.play();
    };
    return {
      flag,
      stop,
      play,
      musicDom,
    };
  },
};
</script>

<style lang="scss" scoped>
.background-music {
  position: fixed;
  right: 10px;
  top: 20px;
  text-align: right;
  z-index: 9999;
  img {
    width: 30px;
    height: 30px;
    animation: turns 3s linear infinite;
  }
  img:active {
    animation-play-state: paused;
  }
}

@keyframes turns {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

